<template>
  <div class="main">
    <div class="air-column">
      <h2>乘机人</h2>
      <el-form class="member-info">
        <!-- 乘机人信息列表，根据人数循环这个div -->
        <div class="member-info-item" v-for="(item,index) in form.users" :key="index">
          <el-form-item label="乘机人类型">
            <el-input placeholder="姓名" class="input-with-select" v-model="item.username">
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="成人" value="1"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item label="证件类型">
            <el-input placeholder="证件号码" class="input-with-select" v-model="item.id">
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="身份证" value="1" :checked="true"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <span class="delete-user" @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>

      <el-button class="add-member" type="primary" @click="handleAddUsers">添加乘机人</el-button>
    </div>

    <div class="air-column">
      <h2>保险</h2>
      <div>
        <!-- 循环渲染保险的数据，数据来源于后台 -->
        <div class="insurance-item" v-for="(item, index) in infoData.insurances" :key="index">
          <el-checkbox
            @change="handleInsurance(item.id)"
            :label="`${item.type}：￥${item.price}/份×1  最高赔付${item.compensation}`"
            border
          ></el-checkbox>
        </div>
      </div>
    </div>

    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <el-form label-width="60px">
          <el-form-item label="姓名">
            <el-input v-model="form.contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input placeholder="请输入内容" v-model="form.contactPhone">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="form.captcha"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" class="submit" @click="handleSubmit">提交订单</el-button>
      </div>
    </div>
    <!-- 计算属性改变才触发  我们先调用-->
     <span v-show="false">{{allPrice}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        //   定义一个数组存放乘车人数据 每次添加用户就多加一个对象进去
        users: [{ username: "", id: "" }],
        //   提交表单需要的参数
        insurances: [], //   保险id
        contactName: "", //	联系人名字
        contactPhone: "", //	联系人电话
        captcha: "", //手机验证码
        invoice: false, //是否需要发票
        seat_xid: "", //座位id
        air: 0 //航班id
        // 当前机票的信息
      },
      infoData: {}
    };
  },
  computed:{
    // 在这里提交订单可以拿到用户数据 在这里计算价格 在右侧栏显示总价
    allPrice(){
      // 还没拿到信息不计算
      if(!this.infoData.seat_infos) return;
      let price = 0;
      // 票价
      price +=this.infoData.seat_infos.org_settle_price;
      // 机建燃油
      price +=this.infoData.airport_tax_audlet;
      // 保险
      price +=this.form.insurances.length * 30;
      price *=this.form.users.length;
      this.$store.commit("air/setAllPrice",price);
      return "";
    }
  },
  mounted() {
    const { id, seat_xid } = this.$route.query;
    //   请求当前机票信息
    this.$axios({
      url: "/airs/" + id,
      params: {
        seat_xid
      }
    }).then(res => {
      console.log(res.data, 11);
      // 保存将机票信息数据
      this.infoData = res.data;
      // 将订单数据保管到store仓库
      this.$store.commit("air/setInfoData", res.data);
    });
  },
  methods: {
    // 添加乘机人
    handleAddUsers() {
      this.form.users.push({
        username: "",
        id: ""
      });
    },

    // 移除乘机人
    handleDeleteUser(index) {
      this.form.users.splice(index, 1);
    },
    // 选中保险
    handleInsurance(id) {
      // 先判断是否选中该项
      const index = this.form.insurances.indexOf(id);
      // 如果选中了再次点击就表示删除
      if (index === 0) {
        this.form.insurances.splice(index, 1);
      } else {
        // 否则就把该保险id添加到data
        this.form.insurances.push(id);
      }
    },
    // 发送手机验证码
    async handleSendCaptcha() {
      // 判断是否有手机号
      if (!this.form.contactPhone) {
        this.$message.error("请输入手机号");
        return;
      }
      // 调用store中的方法
      const code = await this.$store.dispatch(
        "user/sendCaptcha",
        this.form.contactPhone
      );
      this.$message.success("模拟的手机验证码是：" + code);
    },

    // 提交订单
    handleSubmit() {
      // 修改座位id和航班的id, id:air是声明了别名
      //   将id名改为为air
      const { id: air, seat_xid } = this.$route.query;
      this.form = {
        //   结构出form并与 air, seat_xid拼接到一起
        ...this.form,
        air,
        seat_xid
      };
      this.$axios({
        url: "/airorders",
        method: "POST",
        data: this.form,
        // 根据接口文档要求，我们需要header
        headers: {
          // Bearer属于jwt的token标准 Bearer后要加空格隔开
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        }
      }).then(res => {
        console.log(res.data);
      // 提交订单成功跳转到支付页
        this.$message.success("订单提交成功");
        this.$router.push({
          path:"/air/pay",
          query:{
            // 根据id获取订单详情跳转
            id:res.data.data.id
          }
        })
      });
    }
  }
};
</script>

<style scoped lang="less">
.air-column {
  border-bottom: 1px #ddd dashed;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.air-column h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: normal;
}

/deep/ .el-select .el-input {
  width: 130px;
}

.input-with-select {
  width: 590px;
}

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
}
.member-info /deep/ .el-form-item {
  margin-bottom: 0;
}

.member-info-item {
  border-bottom: 1px #eee dashed;
  padding-bottom: 20px;
  position: relative;

  &:first-child {
    .delete-user {
      display: none;
    }
  }
}

.add-member {
  margin-top: 20px;
}

.delete-user {
  display: block;
  background: #ddd;
  width: 16px;
  height: 16px;
  font-size: 20px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: -30px;
  top: 50%;
}

.insurance {
  > div {
    margin-top: 10px;
  }
}

.insurance-item {
  margin-bottom: 20px;
}

.contact {
  /deep/ .el-input {
    width: 50%;
  }
}

.submit {
  margin: 50px auto;
  display: block;
  width: 250px;
  height: 50px;
}
</style>